<template>
    <div ref="myChart" id="myChart"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
mounted(){
	//echarts中内置主题有两种 分别是 light dark
	//echarts.init('图表的dom设置',主题设置)
	let myChart = echarts.init(this.$refs.myChart,'dark')
	let option = {
 dataset:[{
			//数据的分类
		dimensions:['类别','数量'],
		//分类依据
		source:[
			['美食',98],
			['日化',123],
			['熟食',230],
			['数码',223],
			['蔬菜',23],
			['杂项',263]
		]
	},
	{
		transform:{
			type:'sort',
			config:{
				dimension:'数量',order:'desc'
			}
		}
	}
	],
	xAxis:{
		type:'category',
		axisLabel:{
			interval:0,
			rotate:30
		}
	},
	yAxis:{},
 series:[
		{
			type:'bar',
			encode:{
				x:'类别',
				y:'数量',
			},
			datasetIndex:1,//数据集中的哪一项 这里是第一项
		}
	]
	}
	myChart.setOption(option)
}
}
</script>
<style scoped>
#myChart {
    width: 500px;
    height: 500px;
    border: 1px solid red;
}
</style>
